<script setup lang="ts">
import {ref} from "vue";

const props = defineProps(['list', 'title'])
const emit = defineEmits(['check'])
let current = ref(0)
const check = (index) => {
  current.value = index
  emit('check', index)
}
</script>

<template>
  <div class="select-tag">
    <p>{{ props.title }}</p>
    <div class="select-tag-list">
      <div v-for="(item,index) in props.list" class="select-tag-item" @click="check(index)"
           :class="current==index?'active':''">
        {{ item }}
      </div>
    </div>
  </div>
  <slot></slot>


</template>

<style scoped lang="scss">
.select-tag {
  display: flex;
  gap: 30px;
  align-items: center;
  margin: 20px 0;

  .select-tag-list {
    display: flex;
  }

  .select-tag-item {
    padding: 8px 20px;
    margin: 0 10px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #EAEAEA;
    color: #000;
    cursor: pointer;
  }

  .active {
    background-color: #F6F8FF;
    border: 1px solid #597DFC;
    color: #597DFC;
  }

}
</style>